<template>
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <div class="flex items-center text-xl font-bold text-gray-800 mb-5">
            <UnorderedListOutlined class="text-2xl text-blue-500 mr-2" />
            <span>播放列表</span>
            <span class="text-sm font-normal text-gray-500 ml-2">（共 {{ songs.length }} 首）</span>
        </div>
        <div>
            <a-table
                :columns="columns"
                :data-source="songs"
                :pagination="false"
                :row-class-name="(record: Song) => (currentSongId === record.id ? 'bg-blue-50' : '')"
                class="[&_.ant-table-thead>tr>th]:bg-gray-50 [&_.ant-table-thead>tr>th]:text-gray-500 [&_.ant-table-thead>tr>th]:font-medium [&_.ant-table-thead>tr>th]:border-b [&_.ant-table-thead>tr>th]:border-gray-100 [&_.ant-table-tbody>tr]:cursor-pointer [&_.ant-table-tbody>tr:hover]:bg-gray-50 [&_.ant-table-tbody>tr.bg-blue-50:hover]:bg-blue-50 [&_.ant-table-tbody>tr>td]:border-b [&_.ant-table-tbody>tr>td]:border-gray-100"
                @row-click="(record) => emit('play', record)"
            >
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        <span class="text-gray-500 text-sm">{{ index + 1 }}</span>
                    </template>
                    <template v-else-if="column.key === 'name'">
                        <div class="flex items-center gap-2">
                            <PlayCircleFilled
                                v-if="currentSongId === record.id && isPlaying"
                                class="text-blue-500 text-base animate-pulse"
                            />
                            <span
                                class="flex-1 text-gray-800 font-medium truncate cursor-pointer"
                                :class="{ 'text-blue-500': currentSongId === record.id }"
                                @dblclick.stop="emit('play', record)"
                            >
                                {{ record.name }}
                            </span>
                            <a-tag v-if="record.vip" color="blue">VIP</a-tag>
                        </div>
                    </template>
                    <template v-else-if="column.key === 'artist'">
                        <span class="text-gray-600 text-sm">{{ record.artist }}</span>
                    </template>
                    <template v-else-if="column.key === 'album'">
                        <span class="text-gray-600 text-sm">{{ record.album }}</span>
                    </template>
                    <template v-else-if="column.key === 'duration'">
                        <span class="text-gray-500 text-sm">{{ formatDuration(record.duration) }}</span>
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <div class="flex gap-3">
                            <HeartOutlined
                                class="text-base text-gray-500 cursor-pointer transition-colors hover:text-blue-500"
                            />
                            <DownloadOutlined
                                class="text-base text-gray-500 cursor-pointer transition-colors hover:text-blue-500"
                            />
                            <MoreOutlined
                                class="text-base text-gray-500 cursor-pointer transition-colors hover:text-blue-500"
                            />
                        </div>
                    </template>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    UnorderedListOutlined,
    PlayCircleFilled,
    HeartOutlined,
    DownloadOutlined,
    MoreOutlined,
} from '@ant-design/icons-vue'
import type { Song } from './types'

// Props
defineProps<{
    songs: Song[]
    currentSongId?: number
    isPlaying: boolean
}>()

// Emits
const emit = defineEmits<{
    (e: 'play', song: Song): void
}>()

// 表格列配置
const columns = [
    { title: '', key: 'index', width: 60 },
    { title: '音乐标题', key: 'name', width: 300 },
    { title: '歌手', key: 'artist', width: 150 },
    { title: '专辑', key: 'album', width: 200 },
    { title: '时长', key: 'duration', width: 100 },
    { title: '操作', key: 'action', width: 120 },
]

// Methods
const formatDuration = (seconds: number) => {
    const min = Math.floor(seconds / 60)
    const sec = Math.floor(seconds % 60)
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
}
</script>
